<template>
	<view>
		<u-icon name="/static/icon/langChange2.png" size="46" :class="langChangeIcon"></u-icon>
		
		<!-- 切换语言弹窗 -->
		<u-popup v-model="langChangeShow" mode="center" border-radius="20" :zoom="true" duration="100">
			<view class="langPop">
				<view class="langUl">
					<view class="langLi">
						<view class="langItem chinaLi" :class='chItem' @click="setLang('china')">
							<u-image src="/static/icon/china.png" :class="chIcon" shape="circle" class="langImg" width="100" height="100"></u-image>
							<text class="langText">中文</text>
						</view>
						<view class="langItem laoLi" :class='laoItem' @click="setLang('lao')">
							<u-image src="/static/icon/lao.png" :class="laoIcon" shape="circle" class="langImg" width="100" height="100"></u-image>
							<text class="langText">ປະເທດລາວ</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				langChangeShow: false,
				langChangeIcon: ['langChangeIcon'],
				chIcon: ['langChangeIcon'],
				laoIcon: ['langChangeIcon'],
				chItem: ['langChangeIcon'],
				laoItem: ['langChangeIcon']
			};
		},
		mounted() {
			this.getLang()
		},
		computed:{
			isLao(){
				return this.$store.getters.isLao
			}
		},
		methods:{
			getLang(){
				if	(this.isLao){
					this.chItem = ['langChangeIcon']
					this.laoItem = ['selectedBg']
				}else{
					this.chItem = ['selectedBg']
					this.laoItem = ['langChangeIcon']
				}
			},
			langChange(){
				this.getLang()
				this.langChangeShow = true
				this.langChangeIcon = ['langChangeHover']
				setTimeout(()=>{
					this.langChangeIcon = ['langChangeIcon']
				},200)
				uni.vibrateShort();
			},
			setLang(lang){
				this.$store.dispatch('setIsLao',lang=='lao')
				if(lang=='lao'){
					this.laoIcon = ['langChangeHover']
					setTimeout(()=>{
						this.laoIcon = ['langChangeIcon']
						this.laoItem = ['selectedBg']
						this.chItem = ['langChangeIcon']
						this.langChangeShow = false
						uni.vibrateShort();
					},200)
				}else{
					this.chIcon = ['langChangeHover']
					setTimeout(()=>{
						this.chIcon = ['langChangeIcon']
						this.chItem = ['selectedBg']
						this.laoItem = ['langChangeIcon']
						this.langChangeShow = false
						uni.vibrateShort();
					},200)
				}
			}
		}
	}
</script>

<style lang="scss">
	.langChangeIcon{
		transition: all ease-in-out 0.1s!important; 
	}
	.langChangeHover{
		transform:scale(0.8)!important;
		transition: all ease-in-out 0.1s!important; 
	}
	.selectedBg{
		background-color: rgba(247,198,10,0.2)!important;
		transition: all ease-in-out 0.1s!important; 
	}
	.langPop{
		width: 460rpx;
		.langUl{
			.langLi{
				display: flex;
				flex-direction: column;
				.chinaLi{
					padding-top: 8rpx;
					border-bottom: rgb(230,230,230) solid 2rpx;
				}
				.laoLi{
					padding-bottom: 8rpx;
				}
				.langItem{
					padding: 20rpx;
					display: flex;
					align-items: center;
					.langImg{
						overflow: hidden;
						border-radius: 50%;
						margin-right: 30rpx;
					}
					.langText{
						font-size: 36rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
